<template>
  <basic-dialog
    :visible="show"
    minWidth="600px"
    isShowBasicFooter
    :isShowInnerLoading="isShowInnerLoading"
    :loading="isSubmitloading"
    @close="resetInfo"
    @submit="submit"
    title="绑定信息"
    :isFullScreen="false"
  >
    <div style="max-height: 300px" class="scrollbar overflow-auto">
      <div class="padding-20">
        <div class="row margin-b-10">
          <div class="col row">
            员工编号：
            <div class="text-ellipsis" style="width: 70%">
              {{ userData.number }}
              <q-tooltip>
                {{ userData.number }}
              </q-tooltip>
            </div>
          </div>
          <div class="col">
            员工姓名：
            {{ userData.userName }}
          </div>
        </div>
        <div class="row">
          <div class="col row">
            员工角色：
            <div class="text-ellipsis" style="width: 70%">
              {{ roles }}
              <q-tooltip>
                {{ roles }}
              </q-tooltip>
            </div>
          </div>
          <div class="col row">
            IC卡号：
            <div class="text-ellipsis" style="width: 70%">
              {{ userData.icCardNumber }}
              <q-tooltip>
                {{ userData.icCardNumber }}
              </q-tooltip>
            </div>
          </div>
        </div>
      </div>
      <q-separator class="full-width line" />
      <div
        class="form-inline justify-center margin-t-20"
        style="padding-bottom: 0px"
      >
        <select-tooltip
          v-model="queryParams.shiftIds"
          isShowAll
          :multiple="false"
          :options="shiftsData"
          msg="轮班"
          class="margin-r-20"
        ></select-tooltip>
        <select-tooltip
          v-model="queryParams.userType"
          :multiple="false"
          :options="userOptions"
          msg="角色"
        ></select-tooltip>
      </div>
    </div>
  </basic-dialog>
</template>
<script>
import userManageApi from 'src/boot/system/user-manage'
import { batchBind, getNowShift } from 'src/boot/job/man-machine-bind'
const { getUserByIC } = userManageApi
import { mapGetters } from 'vuex'
import _ from 'lodash'
export default {
  name: 'pay-dialog',
  props: {
    show: Boolean,
    shiftsList: Array
  },
  data () {
    return {
      isShowInnerLoading: false,
      isSubmitloading: false,
      userData: {
        number: '',
        userName: '',
        icCardNumber: '',
        id: ''
      },
      roles: '',
      queryParams: {
        shiftIds: 'all',
        userType: ''
      },
      deviceIds: [],
      workshopId: ''
      // userOptions: [
      //   {
      //     label: '操作员',
      //     value: 'operator'
      //   },
      //   {
      //     label: '技术员',
      //     value: 'technician'
      //   }
      // ]
    }
  },
  computed: {
    ...mapGetters([
      'permissions'
    ]),
    shiftsData () {
      return _.tail(this.shiftsList)
    },
    userOptions () {
      const arr = []
      this.permissions.includes(this.Enums.SYS_PERMISSION.OPERATOR_BINDING_BTN.value) && arr.push({
        label: '操作员',
        value: 'operator'
      })
      this.permissions.includes(this.Enums.SYS_PERMISSION.TECHNICIAN_BINDING_BTN.value) && arr.push({
        label: '技术员',
        value: 'technician'
      })
      return arr
    }
  },
  mounted () {
    console.log(this.permissions)
  },
  methods: {
    submit () {
      if (_.isEmpty(this.queryParams.userType)) return this.$message.warning('角色不能为空')
      const params = { ...this.queryParams, deviceIds: this.deviceIds, workshopId: this.workshopId, userId: this.userData.id }
      if (this.queryParams.shiftIds === 'all') {
        params.shiftIds = this.shiftsData.map(v => v.value)
      } else {
        params.shiftIds = [ this.queryParams.shiftIds ]
      }
      this.isSubmitloading = true
      batchBind(params).then(res => {
        this.isSubmitloading = false
        if (res.success) this.$message.success('绑定成功')
        Object.assign(this.queryParams, this.$options.data.call(this).queryParams)
        this.$emit('close', true)
      }).catch(err => {
        this.isSubmitloading = false
        console.log(err)
      })
    },
    resetInfo () {
      this.$emit('close')
      Object.assign(this.queryParams, this.$options.data.call(this).queryParams)
    },
    getUserList (userId, deviceIds, workshopId) {
      this.deviceIds = deviceIds.map(v => v.deviceId)
      this.workshopId = workshopId
      this.getNowShift(workshopId)
      this.isShowInnerLoading = true
      getUserByIC(userId)
        .then(res => {
          this.isShowInnerLoading = false
          this.userData = res.data
          this.roles = res.data.roles.map(v => v.name).join()
          console.log(res)
        })
        .catch(err => {
          console.log(err)
          this.$emit('close')
          this.isShowInnerLoading = false
        })
    },
    getNowShift (workshopId) {
      getNowShift(workshopId).then(res => {
        const ret = res.data
        if (!_.isEmpty(ret)) {
          this.queryParams.shiftIds = this.shiftsData.map(v => v.value).includes(ret.id) ? ret.id : 'all'
        }
      })
    }
  }
}
</script>
